<template>
    <div class="notice-content" v-loading="noticeLoading">
        <h2>{{ noticeDetail.noticeTitle }}</h2>
        <div class="content">
            <pre v-html="noticeDetail.noticeContent"/>
        </div>
        <p class="footer">
            {{ noticeDetail.remark }}
            <time>{{ noticeDetail.createTime }}</time>
        </p>
    </div>

</template>

<script>
import {noticeDetail} from "./api";
import {responseEnum} from "../../const/const";

export default {
    name: "noticeDetail",
    props: ['noticeId'],
    data(){
        return{
            noticeLoading: false,
            noticeDetail: {}
        }
    },
    created() {
        this.onNoticeDetail();
    },
    methods:{
        /**
         * 公告详情
         */
        onNoticeDetail() {
            this.noticeLoading = true;
            noticeDetail(this.noticeId).then(res => {
                if (res.code === responseEnum.success) {
                    this.noticeDetail = res.data;
                }
            }).finally(() => this.noticeLoading = false)
        },

    }
}
</script>

<style lang="scss" scoped>
.notice-content {
    padding: 0 20px;

    h2 {
        font-size: 18px;
        font-weight: bold;
    }

    .content {
        margin: 50px 0;
        text-indent: 2em;
        color: #555;
        font-size: 14px;
        line-height: 2;

        pre {
            white-space: normal;
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        color: #555;
        font-size: 14px;

        time {
            color: #aaa;
        }
    }
}

</style>
